<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      window.log = console.log;
    </script>
    <!--      <div>{{arr}}</div>-->

    <!--    <my-button></my-button>-->
    <!--    <my-button></my-button>-->
    <!--    <my-button></my-button>-->
    <script src="/dist/vue.js"></script>
    <div id="app" style="color: green">
      <div>{{a}}</div>
      <div>{{a}}</div>
    </div>

    <script>
      Vue.component("my-button", {
        template: "<button>全局按钮</button>",
        beforeCreate() {
          log("beforeCreate-----全局组件");
        },
      });

      // // 得到一个组件器构造函数 Sub
      // let Sub = Vue.extend({
      //   template: "<button>按钮2</button>>",
      // });
      // // 得到一个基于 Sub 的组件, 可以重新命名，当用于页面时就会变成 vm 实例
      // let comP = new Sub({
      //   name: "my-button",
      //   template: "<button>按钮3</button>>",
      // });
      const options = {
        el: "#app",
        data() {
          return {
            // arr: [[23, 566]], // 使用了 JSON。stringify() 方法会取值，产生 dep
            a: { a: { a: 100 } },
          };
        },
        beforeCreate() {
          log("beforeCreate-----根组件");
        },
        created() {
          log("created-----根组件");
        },

        components: {
          // comP,
          "my-button": {
            template: "<button>内部按钮</button>",
            beforeCreate() {
              log("beforeCreate-----子组件");
            },
            created() {
              log("created-----子组件");
            },
          },
        },
        watch: {
          // "a.a.a": {
          //   handler(newVal, oldVal) {
          //     log(newVal, oldVal);
          //   },
          // },
          "a.a.a": function (newVal, oldVal) {
            log(newVal, oldVal);
          },
        },
      };
      const vm = new Vue(options);
      // log("vm----", vm.options);
      // vm._init(options);

      vm.a.a.a = 300;

      // setTimeout(() => {
      //   vm.a.a.a = 3120;
      // });
    </script>
  </body>
</html>
